<template>
  <div class="login">
    <div class="login-conten">
      <!-- 标题 -->
      <div class="login-title"></div>
      <!-- 搜索框 -->
      <div class="login-ipt">
        <div class="login-ipt__img"></div>
        <el-autocomplete class="login-ipt__box" v-model="searchVal" :fetch-suggestions="querySearch" value-key="name"
          placeholder="请输入内容" :trigger-on-focus="true" :popper-class="noData ? 'platform-auto-complete' : ''"
          @select="viewHotReport"></el-autocomplete>

        <!-- <el-input class="login-ipt__box" v-model="searchVal" placeholder="此处请输入关键词检索公开热点报告" clearable
          @keyup.enter.native="handleSearch()"></el-input> -->
      </div>
      <!-- 关键字 -->
      <div class="login-span">
        <div class="login-span__item" v-for="item in HotPublicReportList" :key="item.id" @click="viewHotReport(item)">
          {{ item.name }}
        </div>
      </div>
      <!-- 登陆按钮 -->
      <!-- <div class="userWrapper">
        <el-button type="primary" round v-if="Object.keys(userData).length === 0" @click="handShowLogin">登录</el-button>

        <div class="content-header-admin" v-else>
          <el-button size="small" type="primary" round @click="goToDashboard">专题管理</el-button>
          <div class="content-header-user">
            <div class="content-header-admin__img">
              <i class="el-icon-user" v-if="!userData.avatar"></i>
              <img class="user-img" v-if="userData.avatar" :src="'http://101.42.6.163:8686' + userData.avatar" />
            </div>
            <div class="content-header-admin__name">{{ userData.nickName }}</div>
            <el-popover placement="bottom" width="40" trigger="click">
              <div class="content-header-loginout" @click="loginOutHandle">
                退出登录
              </div>
              <i class="el-icon-arrow-down content-header-admin__icon" slot="reference"></i>
            </el-popover>
          </div>

        </div>


      </div> -->

    </div>
    <!-- 登陆弹出框 -->
    <div class="login-popup" v-if="isShow">
      <!-- 登陆或注册 -->
      <div class="login-popup__title">
        <div :class="[{ 'login-popup__title_select': isLogin }]" @click="handChangeLogin(true)">
          登录
        </div>
        <div :class="[{ 'login-popup__title_select': !isLogin }]" @click="handChangeLogin(false)">
          注册
        </div>
      </div>
      <!-- 内容 -->
      <div class="login-popup__content">
        <!-- 用户名 -->
        <div class="login-popup__temp">
          <div>用户名</div>
          <el-input class="login-ipt__login" v-model="name" placeholder="请输入内容"></el-input>
        </div>
        <!-- 密码 -->
        <div class="login-popup__temp">
          <div>密码</div>
          <el-input type="password" class="login-ipt__login" v-model="password" placeholder="请输入内容"></el-input>
        </div>
        <!-- 确认 -->
        <div class="login-popup__temp" v-if="!isLogin">
          <div>确认密码</div>
          <el-input type="password" class="login-ipt__login" v-model="password2" placeholder="请输入内容"></el-input>
        </div>
        <div class="login-popup__check">
          <el-checkbox class="login-popup__check-box" size="medium" v-model="checked"></el-checkbox>
          <div>
            <span>已阅读并同意平台账号</span>
            <span class="login-popup__check_span">用户协议</span>
            <span>和</span>
            <span class="login-popup__check_span">隐私政策</span>
          </div>
        </div>
        <!-- 注册 -->
        <el-button type="primary" round @click="handSubmit" style="width: 100%; margin-top: 32px;">
          {{ isLogin ? "登录" : "注册" }}
        </el-button>
      </div>
    </div>
    <!-- 登陆 -->
    <div class="login-mask" v-if="isShow" @click.stop="handShowLogin"></div>
    <!-- 动画 -->
    <div class="login-lottie" id="lottie"></div>
    <div class="content-footer">
      <a href="https://beian.miit.gov.cn">京ICP备2024048529号-1</a>
      <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010802044023\">{{ `© ${year} `
        }}京公网安备11010802044023</a>

    </div>
  </div>

</template>

<script>
import { getInfo } from "@/api/modules/user";
import { login, register, listHotPublicReport } from "@/api/modules/login";

import lottie from "lottie-web";
import lottilejson from "./assets/images/lottie";
export default {
  name: "LoginPage",
  data() {
    return {
      noData: false,//搜索框没有匹配到数据时理性样式
      searchVal: "",//绑定登录页搜索框内容
      HotPublicReportList: [],
      isShow: false,
      isLogin: true,
      name: "",
      password: "",
      password2: "",
      checked: false,
      userData: {},
      year: new Date().getFullYear(),
    };
  },
  created() {
    const userDataFromLocalStorage = JSON.parse(localStorage.getItem('userData'));
    this.userData = userDataFromLocalStorage || {};
  },
  mounted() {
    this.listHotPublicReportHanlde()
    const lot = lottie.loadAnimation({
      container: document.getElementById("lottie"),
      renderer: "svg",
      loop: true,
      autoplay: false,
      animationData: lottilejson,
    });

    // 开始播放动画
    lot.play();
  },
  methods: {
    handleNoMatch() {
      return ['没有搜索到相应数据'];
    },
    //搜索下拉
    querySearch(queryString, cb) {
      listHotPublicReport({
        name: queryString
      }).then((res) => {
        if (res.code == 200) {
          let names = res.data;
          this.noData = false
          if (names.length === 0) {
            names = [{ name: '目前系统无此相关主题的公开热点报告' }]
            this.noData = true
          }
          cb(names);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      }).catch(error => {
        this.$message({
          message: 'Error fetching data',
          type: 'error',
          showClose: true,
        });
      });
    },
    goToDashboard() {
      this.$router.push({
        path: '/',
      });
    },
    loginOutHandle() {
      //退出登录
      localStorage.clear();

      // 清除sessionStorage
      sessionStorage.clear();
      this.$router.replace({ path: "/login" });
      location.reload();
    },

    handleSearch() {
      // 搜索热点报告,使用路由导航器的 push 方法跳转到热点报告页面，并传递搜索内容
      this.$router.push({
        path: '/history2',
        query: {
          searchVal: this.searchVal
        }
      });
    },
    // 获取登录页热点报告
    listHotPublicReportHanlde() {
      listHotPublicReport({}).then((res) => {
        if (res.code == 200) {
          this.HotPublicReportList = res.data.slice(0, 4);//截取前4条数据
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    //查看热点报告
    viewHotReport(item) {
      // 使用路由导航器的 push 方法跳转到报告页面，并传递报告ID
      this.$router.push({
        path: '/viewreport',
        query: {
          reportId: item.id
        }
      });
    },



    getInfoHandle() {
      getInfo().then((res) => {
        if (res.code == 200) {
          this.userData = res.user;
          localStorage.setItem('userData', JSON.stringify(this.userData));
          this.$bus.$emit('changeAvatar', true)
        }
      });
    },
    handSubmit() {
      // 页面直接跳转
      if (this.isLogin) {
        if (!this.name || !this.password) {
          this.$message({
            message: "请输入账号和密码",
            type: "error",
            showClose: true,
          });
          return;
        }
        if (!this.checked) {
          this.$message({
            message: "请阅读阅读并同意协议政策",
            type: "error",
            showClose: true,
          });
          return;
        }

        login({
          username: this.name,
          password: this.password,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg || "登录成功",
              type: "success",
              showClose: true,
            });
            this.getInfoHandle()

            localStorage.setItem("token", res.token);
            this.$router.push({
              path: "/specia",
            });
          } else {
            this.$message({
              message: res.msg || "登录失败",
              type: "error",
              showClose: true,
            });
          }
        });
      } else {
        if (!this.name || !this.password) {
          this.$message({
            message: "请输入账号和密码",
            type: "error",
            showClose: true,
          });
          return;
        }
        if (!this.password2) {
          this.$message({
            message: "请输入确认密码",
            type: "error",
            showClose: true,
          });
          return;
        }
        register({
          username: this.name,
          password: this.password,
          confirmPassword: this.password2,
        }).then((res) => {
          if (res.code == 200) {
            this.name = "";
            this.password = "";
            this.password2 = "";
            this.isLogin = true;
            this.$message({
              message: res.msg || "注册成功",
              type: "success",
              showClose: true,
            });
          } else {
            this.$message({
              message: res.msg || "注册失败",
              type: "error",
              showClose: true,
            });
          }
        });
      }
    },
    handShowLogin() {
      this.name = "";
      this.password = "";
      this.password2 = "";
      this.isShow = !this.isShow;
    },
    handChangeLogin(val) {
      this.name = "";
      this.password = "";
      this.password2 = "";
      this.isLogin = val;
    },
  },
};
</script>

<style lang="scss">
// 样式覆盖
.platform-auto-complete {
  .el-autocomplete-suggestion__wrap {
    padding: 5px 0;

    ul li {
      pointer-events: none; // 阻止可点击事件

      .default {
        text-align: center;
        color: #999;
      }

      &:hover {
        background-color: #fff;
      }
    }
  }
}

.login-ipt__box {
  width: 100%
}

.login {
  .content-footer {
    position: fixed;
    bottom: 24px;
    font-size: 12px;

    a {
      text-decoration: none;
      color: #999;
    }
  }

  .login-ipt__box .el-input__inner {
    padding-left: 42px !important;
    border-radius: 8px !important;
  }

  .login-popup__content .login-ipt__login {
    .el-input__inner {
      border: none !important;
      background: none;
      height: 24px;
      padding: 0;
    }
  }

  .login-popup__check-box {
    margin-right: 8px;
    zoom: 120%;
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./assets/images/bg.png") no-repeat;
  background-size: cover;
  position: relative;

  .login-conten {
    width: 675px;
    height: 163px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .login-title {
      width: 384px;
      height: 54px;
      background: url("./assets/images/title.png") no-repeat;
      background-size: 100%;
      margin-bottom: 32px;
    }

    .login-ipt {
      width: 675px;
      height: 38px;
      background: #ffffff;
      box-shadow: 0px 0px 0px 0px #cbdafc;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      cursor: pointer;
      position: relative;
      margin-bottom: 16px;

      .login-ipt__img {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 9px;
        left: 12px;
        background: url("./assets/images/serch.png") no-repeat;
        background-size: cover;
        z-index: 2;
      }
    }

    .login-span {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 20px;

      .login-span__item {
        width: auto;
        height: 20px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #454545;
        line-height: 16px;
        cursor: pointer;

        &:hover {
          color: #45454560;
        }
      }
    }

    .login-btn {
      width: 100px;
      height: 36px;
      background: #4c56bb;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 24px;

      cursor: pointer;

      &:hover {
        background: #4c56bb80;
      }

      &:active {
        background: #4c56bb80;
      }
    }
  }

  .login-mask {
    width: 100%;
    height: 100%;
    background: #00000050;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .login-popup {
    width: 468px;
    // height: 530px;
    background: #fff;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px;
    box-sizing: border-box;
    z-index: 2;
  }

  .login-popup__title {
    width: 104px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    font-family: PingFang SC, PingFang SC;

    color: #7d8699;
    line-height: 23px;

    &>div {
      font-weight: 400;
      cursor: pointer;
    }

    margin-bottom: 24px;
  }

  .login-popup__title_select {
    color: #000;
    font-weight: 600 !important;
    position: relative;

    &::after {
      content: " ";
      position: absolute;
      bottom: -6px;
      left: 0;
      height: 3px;
      width: 100%;
      background: #4c56bb;
    }
  }

  .login-popup__temp {
    width: 388px;
    height: 70px;
    border-radius: 8px;
    background: #f4f5f6;
    margin-bottom: 24px;
    padding: 12px 24px;
    box-sizing: border-box;

    >div:nth-child(1) {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 14px;
      margin-bottom: 8px;
    }
  }

  .login-popup__check {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #939393;
    cursor: pointer;

    .login-popup__check_span {
      color: #000 !important;
      margin: 0 2px;

      &:hover {
        color: #00000080 !important;
      }
    }
  }

  .login-popup__loginbox {
    width: 388px;
    height: 60px;
    background: #4c56bb;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 16px;
    cursor: pointer;
    margin-top: 24px;

    &:hover {
      background: #4c56bb80 !important;
    }
  }

  .login-lottie {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 200px;
    height: 200px;
    z-index: 1;
  }

  .userWrapper {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;

    .content-header-admin {
      display: flex;
      align-items: center;
      gap: 24px;

      .content-header-user {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .content-header-admin__icon {
        cursor: pointer;
      }

      .content-header-admin__img img {
        width: 32px;
        height: 32px;
        border-radius: 50px;
      }
    }

  }
}
</style>
